import { Layout, Menu, Modal, Dropdown, Form, message } from 'antd';
import {
  EditOutlined,
  MinusCircleOutlined,
  SearchOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import React, { useState } from 'react';
import {
  Table,
  Radio,
  Divider,
  Space,
  Input,
  DatePicker,
  Select,
  Button,
  Tabs,
} from 'antd';
import ReactDOM from 'react-dom';
import request from '@/http';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import style from './index.less';

const { Sider, Content } = Layout;
const { Search } = Input;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const data = [];

const Graduated = (props: any) => {
  const columns = [
    {
      title: '小组名称',
      dataIndex: 'teamName',
      key: 'teamName',
    },
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },

    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '年级',
      dataIndex: 'yearName',
      key: 'yearName',
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
    },
    {
      title: '班主任',
      dataIndex: 'teacherName',
      key: 'teacherName',
    },

    {
      title: '学员姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学号',
      dataIndex: 'userNo',
      key: 'userNo',
    },
    {
      title: '身份证号码',
      dataIndex: 'idNo',
      key: 'idNo',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text: any, row: any) => {
        return row.gender === 1 ? '男' : '女';
      },
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'mobileNo',
      key: 'mobileNo',
    },
    {
      title: '项目角色',
      dataIndex: 'position',
      key: 'position',
      render: (text: any, row: any) => {
        return row.position == '1'
          ? '前端开发'
          : row.position == '2'
          ? '测试'
          : row.position == '3'
          ? '后端开发'
          : row.position == '4'
          ? '项目经理'
          : row.position == '5'
          ? '产品经理'
          : row.position == '6'
          ? 'UI'
          : '';
      },
    },
    {
      title: '组长',
      dataIndex: 'isTeamLeader',
      key: 'isTeamLeader',
      render: (text: any, row: any) => {
        return row.isTeamLeader === 1 ? '√' : '';
      },
    },
  ];

  interface DataType {
    key: React.Key;
    collegeName: string;
    majorName: string;
    gradeName: string;
    className: string;
    teacherName: string;
    studentName: string;
    studentNo: string;
    studentIdCard: string;
    studentSex: string;
    studentEmail: string;
    studentTell: string;
    studentRole: string;
  }

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
  };

  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );

  //分页
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });
  const pageOnChange = async (page: any) => {
    // await loadData(formObject.getFieldsValue(), page.current, page.pageSize);
  };

  //项目组下拉栏(所有项目小组)
  const [projectSearchValue, setProjectSearchValue] = React.useState('');
  const searchProjectOnChange = (value: any) => {
    setProjectSearchValue(value.target.value);
  };
  const [group, setGroup] = React.useState([]);
  const [slectForm] = Form.useForm();
  const getGroup = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const teamName = await slectForm.validateFields();
    console.log(teamName);
    const Group: any = await request.post('/team/selectTeam', {
      isGraduation: 0,
      teamName: projectSearchValue,
      ...queryParams,
      page: pageValue,
      number: pageSizeValue,
    });
    if (Group.code == '200') {
      setGroup(Group.date.returnDate);
      selGroup(
        Group.date.returnDate[0].teamInfoId,
        null,
        1,
        pagination.pageSize,
      );
    } else {
      message.error(Group.message); //弹出错误信息
    }
    setPagination({
      ...pagination,
      current: pageValue,
      pageSize: pageSizeValue,
      total: Group.totalCount,
    });
  };
  const [formObject] = Form.useForm();
  //查询所有成员
  const selectAllStudents = async (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const selectAllStudentsR: any = await request.post(
      '/team/selectTeamStudent',
      {
        isGraduation: 0,
        ...queryParams,
        page: pageValue,
        number: pageSizeValue,
      },
    );
    console.log(selectAllStudentsR);
    if (selectAllStudentsR.code == '200') {
      console.log(selectAllStudentsR);
      const newData = selectAllStudentsR.date.returnDate.map(
        (d: any, index: any) => {
          return {
            key: `k_${index}`,
            ...d,
          };
        },
      );
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: selectAllStudentsR.totalCount,
      });
      setData(newData);
    } else {
      message.error(selectAllStudentsR.message); //弹出错误信息
    }
  };
  const [data, setData] = React.useState([]);
  const selGroup = async (
    teamInfoId: any,
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const datas = await formObject.validateFields();
    const selGroupR: any = await request.post('/team/selectTeamStudent', {
      isGraduation: 0,
      teamInfoId: teamInfoId,
      ...queryParams,
      page: pageValue,
      number: pageSizeValue,
      ...datas,
    });

    if (selGroupR.code == '200') {
      console.log(selGroupR);
      const newData = selGroupR.date.returnDate.map((d: any, index: any) => {
        return {
          key: `k_${index}`,
          ...d,
        };
      });
      setPagination({
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: selGroupR.totalCount,
      });
      setData(newData);
    } else {
      message.error(selGroupR.message); //弹出错误信息
    }
  };

  const onReset = () => {
    formObject.resetFields();
    // loadData(null, 1, pagination.pageSize);
  };
  React.useEffect(() => {
    // loadData(null, 1, pagination.pageSize).finally();
    getGroup(null, 1, pagination.pageSize);
  }, []);

  return (
    <div className={style.box}>
      <h2 className={style.h2}>项目分组</h2>
      <Link to="/admin/GroupManager">
        <Button
          className={All_style.button2}
          style={{ width: 120, marginLeft: 20 }}
        >
          查看未结业分组
        </Button>
      </Link>

      <Layout>
        <div className={style.siderleft}>
          <Sider className={style.sider}>
            <div className={style.a}>
              <Button
                type="link"
                onClick={() => {
                  selectAllStudents(null, 1, pagination.pageSize);
                }}
              >
                <TeamOutlined />
                查看所有分组成员
              </Button>
            </div>

            <Input
              style={{ width: '100%' }}
              placeholder="请输入关键字"
              suffix={
                <SearchOutlined
                  style={{ color: 'rgba(0,0,0,.45)' }}
                  onClick={() => {
                    getGroup(null, 1, pagination.pageSize);
                  }}
                />
              }
              onChange={searchProjectOnChange}
            />

            <Menu mode="inline">
              {group.map((c: any, index) => {
                return (
                  <>
                    <Menu.Item
                      key={`k_${index}`}
                      style={{ float: 'left' }}
                      onClick={() => {
                        selGroup(c.teamInfoId, null, 1, pagination.pageSize);
                      }}
                    >
                      {c.teamName}
                    </Menu.Item>
                  </>
                );
              })}
            </Menu>
          </Sider>
        </div>

        <Content className={style.content}>
          <Form name="selectForm" form={formObject} preserve={false}>
            <Form.Item
              name="teamName"
              label="小组名称"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select placeholder="请选择" className={All_style.select}>
                {group.map((c: any, index) => {
                  return (
                    <Option key={`k_${index}`} value={c.teamName}>
                      {c.teamName}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              name="  name"
              label="学员姓名"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input
                placeholder="支持模板查询"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <Form.Item
              name="userNo"
              label="学号"
              style={{ float: 'left', marginLeft: 30 }}
              className={All_style.formItem}
            >
              <Input
                placeholder="精准匹配"
                className={All_style.select}
              ></Input>
            </Form.Item>

            <Button
              className={All_style.button}
              onClick={() => {
                selGroup(null, null, 1, pagination.pageSize);
              }}
            >
              查询
            </Button>

            <Button className={All_style.button2} onClick={onReset}>
              重置
            </Button>
          </Form>

          <div style={{ clear: 'both' }}>
            <Radio.Group
              onChange={({ target: { value } }) => {
                setSelectionType(value);
              }}
              value={selectionType}
            ></Radio.Group>

            <Table
              rowSelection={{ type: selectionType, ...rowSelection }}
              columns={columns}
              dataSource={data}
              className={All_style.table}
            />
          </div>
        </Content>
      </Layout>
    </div>
  );
};
export default Graduated;
